<template>
  <div style="display: flex;height: 100%;flex-direction: column;">
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"
    />
    <div style="flex: 1;overflow: auto;padding-left: 5px;">
      <div class="outlet-tree-panel">
        <el-tree
          ref="tree"
          v-loading="treeLoading"
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :highlight-current="true"
          node-key="id"
          :filter-node-method="filterNode"
          :default-expand-all="true"
          @node-click="handleNodeClick"
        >
          <!-- eslint-disable-next-line vue/no-template-shadow -->
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <!-- style="white-space:normal; word-break:break-all;line-height: 30px;" -->
            <div
              :title="node.label"
              style="white-space:normal; word-break:break-all;line-height: 30px;display: flex;width: 100%;align-items: center;"
              :style="{
                'font-size': data.level === 3?'14px':'15px','font-weight':data.level !== 2&&data.level !== 3?'bold':'',
                'padding-left': data.level === 3?'20px':''
              }"
            >
              <div>
                <svg-icon v-if="data.level === 2" icon-class="enterprise" style="width: 1.3em;height: 1.5em;position: relative;top: 2px;color:#977585;" class="outlet-constant-value" />
                <svg-icon v-else-if="data.level === 3 && data.outletType && data.outletType === 'e012_01'" icon-class="wasteGas" :class="changeColor(data)" style="width: 1.3em;height: 1.3em;" />
                <svg-icon v-else-if="data.level === 3 && data.outletType && data.outletType === 'e012_02'" icon-class="wasteWater" :class="changeColor(data)" style="width: 1.3em;height: 1.3em;" />
                <svg-icon v-else-if="data.level === 3 && data.outletType && data.outletType === 'e012_03'" icon-class="wasteWater2" :class="changeColor(data)" style="width: 1.3em;height: 1.3em;" />
              </div>
              <!-- 停产字体为灰色 -->
              <div v-if="data.level === 3" style="line-height: 20px;" :style="{ 'color':data.outletStatus === 'e027_01'? '#606266':'#aaaaaa'}">{{ node.label }}</div>
              <div v-else style="line-height: 20px;">{{ node.label }}({{ data.cbCount }}/{{ data.count }})</div>
            </div>
          </span>
        </el-tree>
      </div>

    </div>
    <div style="height: 150px;padding: 20px 18px 0 18px;">
      <el-row>
        <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #67C23A" />正常</el-col>
        <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #F56C6C" />故障(Flag=D)</el-col>
        <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #E6A23C" />超标</el-col>
        <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #909399" />离线</el-col>
        <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #000000" />停运</el-col>
        <el-col :span="12" style="margin-bottom: 10px;color: #444;"><i class="el-icon-s-flag" style="margin-right: 5px;font-size: 16px;color: #409EFF" />恒值</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTree } from '@/api/base/outlet'
import { getColorByOutletNewStatus } from '@/utils/common'
export default {
  name: 'OutletTree',
  data() {
    return {
      filterText: '',
      treeLoading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getOutletDatas()
  },
  mounted() {},
  methods: {
    // 过滤
    // filterNode(value, data) {
    //   if (!value) return true
    //   return data.name.indexOf(value) !== -1
    // },
    filterNode(value, data, node) {
      if (!value) return true
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    getOutletDatas() {
      this.treeLoading = true
      getTree().then(res => {
        this.data = [{
          id: null,
          name: '全部',
          children: res.data.list,
          count: 0, // 总数
          cbCount: 0// 超标数
        }]
        this.recursion(this.data)
        // this.data = res.data.list
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    // 点击
    handleNodeClick(data, node) {
      this.$emit('handleNodeClick', data, node)
    },
    // 排口颜色
    changeColor(data) {
      return getColorByOutletNewStatus(data.outletNewStatus)
    },
    // 在排口树的数据基础上面增加 统计排口数量以及超标数量
    recursion(data) {
      if (data) {
        data[0].count = 0
        data[0].cbCount = 0
        data[0].children.forEach(element1 => {
          element1.count = 0
          element1.cbCount = 0
          element1.children.forEach(element2 => {
            element2.count = 0
            element2.cbCount = 0
            element2.children.forEach(element3 => {
              if (element3.outletNewStatus === 'e046_05') {
                data[0].cbCount = data[0].cbCount + 1
                element1.cbCount = element1.cbCount + 1
                element2.cbCount = element2.cbCount + 1
              }
              data[0].count = data[0].count + 1
              element1.count = element1.count + 1
              element2.count = element2.count + 1
            })
          })
        })
      }
    }
  }
}
</script>
<style lang="scss">
.outlet-tree-panel{
  .filter-tree .el-tree-node {
    position: relative;
    padding-left: 12px;
  }
  .filter-tree .el-tree-node__children {
    padding-left: 12px;
  }
  .filter-tree .el-tree-node :last-child:before {
    height: 38px;
  }
  .filter-tree .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .filter-tree .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .filter-tree .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .filter-tree .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .filter-tree .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .filter-tree .el-tree-node:before {
    border-left: 1px dashed #b8b9bb;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .filter-tree .el-tree-node:after {
    border-top: 1px dashed #b8b9bb;
    height: 20px;
    top: 12px;
    width: 24px;
  }
  .filter-tree{
    .el-tree-node__content{
      line-height: 18px;
      padding-left: 0px !important;
      height: auto;
    }
  }
}
</style>
<style lang='scss' scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
